<template>
	<view class="">
		<view class="rohead">
			<view class="cinsh">
				<image class="logn" src="/static/dazi/cle.png" mode=""></image>
				<view class="loname">
					Xdidi
				</view>
			</view>

		</view>

		<view class="seins">
			<view class="centwe">
				<view class="urtems">
					<view class="shud">
						手机/邮箱
					</view>
					<view class="conste">
						<view class="xijsd" v-if="isAccountFouce ">
							<view class="sechs" v-if="ishowacc" @click="opencury">
								<image class="cury" src="/static/dazi/china.png" mode=""></image>
								<view class="senum">
									+86
								</view>
								<image class="botm" src="/static/dazi/Polygon 2.png" mode="widthFix"></image>
							</view>
							<view class="incenm">
								<input type="text" placeholder="输入手机号或者邮箱" v-model="account" placeholder-class="co" />
							</view>
							<image v-if="ishowacc" class="siecle" src="/static/dazi/cle.png" mode=""
								@click="account =''"></image>
						</view>

						<view class="" v-else>
							<view class="xijsd">
								<view class="incenm">
									<input type="text" placeholder="输入手机号或者邮箱" v-model="account" @focus="handletelFocus"
										@blur="handletelBlur" placeholder-class="co" />
								</view>
								<image v-if="ishowacc" class="siecle" src="/static/dazi/cle.png" mode=""
									@click="account =''"></image>


							</view>
							<!-- 显示联想的邮箱后缀 -->
							<view v-if="showSuggestions && suggestions.length > 0" class="suggestions">
								<view v-for="(domain, index) in suggestions" :key="index" @click="selectDomain2(domain)"
									class="suggestion-item">
									{{ emailPart }}@{{ domain }}
								</view>
							</view>
						</view>

					</view>
				</view>

				<view class="urtems">
					<view class="shud">
						密码
					</view>
					<view class="conste">
						<view class="xijsd">

							<view class="incenm">
								<input type="text" placeholder="填写密码" placeholder-class="co" />
							</view>
							<view class="">
								<image v-if="ispass" class="siecle" src="/static/dazi/ke.png" mode=""></image>
								<image v-else class="siecle" src="/static/dazi/nokan.png" mode=""></image>
							</view>

						</view>

					</view>
				</view>

				<view class="conse" @click="gopass">
					忘记密码?
				</view>

				<view class="busnd btnact" @click="loginok">
					登录
				</view>

				<view class="regas" @click="goreg">
					注册账号
				</view>

			</view>

			<view class="seacus">
				<view class="isehd">
					<image @click="issele =!issele" v-if="issele" src="/static/dazi/okse.png" mode=""></image>
					<image @click="issele =!issele" v-else src="/static/dazi/nose.png" mode=""></image>
				</view>
				<view class="serins">
					<text>我已阅读并同意Xdidi</text>
					<text class="z1">《用户协议》</text>
					<text>和</text>
					<text class="z1">《隐私政策》</text>
				</view>



			</view>
		</view>

		<up-overlay :show="show2" @click="show2 = false"
			style="display: flex;align-items: flex-end;justify-content: flex-end;width: 750rpx;">
			<view class="sleguo" @tap.stop>
				<view class="ropwen">
					<view class="lesi">
						选择国家/地区代码
					</view>
					<image class="ediuyt" @click="show2=false " src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="serdh">
					<u--input placeholder="搜索" prefixIcon="search" v-model="query" @input="filterCountries"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view class="sercha">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="comyst">
							<view class="ontet" v-for="(item,index) in filteredItems" :key="index"
								:class="doubelslel ==index?'doubelslel':'' " @click="changecurry(item)">
								<view class="klia">
									<image :src=" item.country_image " mode=""></image>
									<view class="nals">
										{{item.en}}
									</view>
								</view>
								<view class="ados">
									+{{item.mobile_code}}
								</view>
							</view>

						</view>
					</scroll-view>

				</view>
			</view>
			<!-- </u-popup> -->
		</up-overlay>
		<alert ref="globalAlert"></alert>

		<wloading v-show="active"></wloading>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				account:'',
				active:false,
				issele: false,
				show2: false,
				isAccountFouce: true,
				ishowacc: true, //当手机邮箱输出变成true
				ispass: false, //是否打来密码查看器
				filteredItems: [{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					}
				], // 存储过滤后的结果
				currylist: [], //国家选择
				doubelslel: 0, //选择的国家
				imgcurry: {}, //默认嗯国家选择

			}
		},
		methods: {
			loginok(){
				this.active = true
				
				setTimeout(e=>{
			
				// uni.switchTab({
				// 	url:'/pages/chat/chat'
				// })
					setTimeout(e=>{
					
							this.active = false
						
				
					},1000)
					setTimeout(e=>{
					
							this.$refs.globalAlert.show({
								type: 'success',
								title: '登录成功',
								content: 'success',
								duration: 2000
							})
							
						setTimeout(e=>{
							uni.switchTab({
								url:'/pages/chat/chat'
							})
						},2000)
						
									
					},1000)
					
				
					
					
				},1500)
	
			},
			opencury() {
				this.show2 = true
			},
			// 忘记密码
			gopass(){
			uni.navigateTo({
				url:'/pages/lug/loginreg/editpass'
			})	
			},

			//选择的国家
			changecurry(item) {
				console.log(item)
				this.imgcurry = item
				this.show2 = false
				this.query = ''
			},
			goreg() {
				uni.reLaunch({
					url: '/pages/lug/loginreg/reg'
				})
			},

		},
	}
</script>

<style lang="scss">
	.z1 {
		color: rgba(251, 117, 214, 1) !important;
	}
	
	.serins {
		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
		}
	}
	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}

	.pouper {
		background-color: #fff;
		width: 600rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.isehd {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.seacus {
		position: fixed;
		bottom: 40rpx;
		display: flex;
		align-items: center;
	}

	.imghu {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.acys {
		color: #0FA088 !important;
	}

	.ontet {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ados {
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
	}

	.klia {
		display: flex;
		align-items: center;

		image {
			margin-right: 30rpx;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			border-radius: 50rpx;
		}

		.nals {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}
	}

	.serdh {
		margin: 30rpx 0;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 30rpx;
		border: 1px solid #CFD6E3;
		display: flex;
		align-items: center;


	}

	.u-border {
		border-style: none !important;
	}

	.ropwen {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ediuyt {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
	}

	.lesi {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: bold;
	}

	.sleguo {
		padding: 30rpx;
		width: 750rpx;
		background-color: #fff;
		z-index: 9999999999;
		border-radius: 50rpx 50rpx 0 0;
	}


	.incenm {
		width: 60%;
		// background-color: #ccc;
	}

	.botm {
		width: 20rpx;
		height: 16rpx;
		vertical-align: middle;
	}

	.sechs {
		display: flex;
		align-items: center;



		.senum {
			padding: 0 6rpx;
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.cury {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.xijsd {
		border: 1px solid rgba(237, 229, 237, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-radius: 24rpx;
	}

	.conste {
		margin: 30rpx 0;
	}



	.seins {
		margin-top: 40rpx;
	}

	.regas {
		color: rgba(251, 117, 214, 1);
		font-size: 28rpx;
		text-align: center;
		margin: 40rpx 0;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.bgd {
		background: rgba(88, 168, 255, 0.1);
		border: 1px solid rgba(88, 168, 255, 1) !important;

	}

	.conse {
		text-align: right;
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
	}

	.xijsd {
		border: 1px solid rgba(237, 229, 237, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-radius: 24rpx;
	}

	.conste {
		margin: 30rpx 0;
	}

	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.siecle {
		width: 44rpx;
		height: 44rpx;
	}

	.urtems {
		.shud {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.incenm {}
	}

	.cinsh {
		display: flex;

		align-items: center;
	}

	.rohead {
		z-index: 999;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.logn {
			border: 1px solid #ccc;
			width: 96rpx;
			height: 96rpx;
			vertical-align: middle;
			border-radius: 24rpx;
			margin-right: 30rpx;
		}

		.loname {
			color: rgba(251, 117, 214, 1);
			font-size: 48rpx;
		}
	}

	page {
		padding: 30rpx;
	}
</style>